<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>运动会</title>

  <link href="/css/common.css" rel="stylesheet">
  <link href="/css/index.css" rel="stylesheet">

  <% include common/main-lib.ejs %>
</head>
<body>

<div id="app">
  <el-container>
    <el-header>
      <% include common/header.ejs %>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <% include common/aside.ejs %>
      </el-aside>
      <el-container>
        <el-main>
          <h1><%= pageName %></h1>
          <el-tabs v-model="tabActiveName" type="card" @tab-click="handleClick">
            <el-tab-pane label="成绩查询" name="1">
              <el-row type="flex" justify="center" style="margin-bottom: 15px">
                <el-input placeholder="请输入内容" v-model="search" class="input-with-select" @keyup.enter="toSearchData"style="width: 500px">
                  <el-select v-model="searchType" slot="prepend" placeholder="请选择" style="width: 100px">
                    <el-option label="姓名" value="playerName"></el-option>
                    <el-option label="学号" value="playerId"></el-option>
                  </el-select>
                  <el-button slot="append" icon="el-icon-search" @click="toSearchData"></el-button>
                </el-input>
              </el-row>
              <el-table
                :data="searchData"
                style="width: 100%">
                <el-table-column
                  label="#"
                  type="index">
                </el-table-column>
                <el-table-column
                  label="学号"
                  prop="playerId">
                </el-table-column>
                <el-table-column
                  label="姓名"
                  prop="playerName">
                </el-table-column>
                <el-table-column
                  label="项目"
                  prop="eventName">
                </el-table-column>
                <el-table-column
                  label="成绩"
                  prop="score">
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="项目成绩统计" name="2">
              <el-collapse v-model="collapseActiveName" accordion style="background: #fff;padding: 0 20px">
                <el-collapse-item :title="item.eventName" :name="index" :key="index" v-for="(item, index) in eventList">
                  <el-table
                    height="300"
                    :data="scores.filter(data => data.eventName.toLowerCase().includes(item.eventName))"
                    style="width: 100%;">
                    <el-table-column
                      label="#"
                      type="index">
                    </el-table-column>
                    <el-table-column
                      label="学号"
                      prop="playerId">
                    </el-table-column>
                    <el-table-column
                      label="姓名"
                      prop="playerName">
                    </el-table-column>
                    <el-table-column
                      label="项目"
                      prop="eventName">
                    </el-table-column>
                    <el-table-column
                      label="成绩"
                      sortable
                      prop="score">
                    </el-table-column>
                  </el-table>
                </el-collapse-item>
              </el-collapse>
            </el-tab-pane>
            <el-tab-pane label="破纪录统计" name="3">
              <el-collapse v-model="collapseActiveName" accordion style="background: #fff;padding: 0 20px">
                <el-collapse-item :title="item.eventName + '--记录：' + item.eventRecord" :name="index" :key="index" v-for="(item, index) in eventList">
                  <el-table
                    :data="scores.filter(data => (data.eventName.includes(item.eventName) && data.score > item.eventRecord && item.eventType === 'fe') || (data.eventName.includes(item.eventName) && data.score < item.eventRecord && item.eventType === 'te'))"
                    style="width: 100%;">
                    <el-table-column
                      label="#"
                      type="index">
                    </el-table-column>
                    <el-table-column
                      label="学号"
                      prop="playerId">
                    </el-table-column>
                    <el-table-column
                      label="姓名"
                      prop="playerName">
                    </el-table-column>
                    <el-table-column
                      label="项目"
                      prop="eventName">
                    </el-table-column>
                    <el-table-column
                      label="成绩"
                      sortable
                      prop="score">
                    </el-table-column>
                  </el-table>
                </el-collapse-item>
              </el-collapse>
            </el-tab-pane>
            <el-tab-pane label="班级成绩统计" name="4">
              <el-table
                :data="classMarkList"
                style="width: 100%"
                :default-sort = "{prop: 'date', order: 'descending'}"
              >
                <el-table-column
                  type="index"
                >
                </el-table-column>
                <el-table-column
                  prop="class"
                  label="班级"
                >
                </el-table-column>
                <el-table-column
                  prop="mark"
                  label="总分"
                >
                </el-table-column>

                <el-table-column type="expand" label="分组成绩" width="150">
                  <template slot-scope="props">
                    <el-table
                      :data="props.row.players"
                      :default-sort = "{prop: 'score', order: 'descending'}"
                      style="width: 100%">
                      <el-table-column
                        type="index"
                        label="#">
                      </el-table-column>
                      <el-table-column
                        prop="playerName"
                        label="姓名">
                      </el-table-column>
                      <el-table-column
                        prop="playerId"
                        label="号码">
                      </el-table-column>
                      <el-table-column
                        prop="playerSex"
                        label="性别">
                      </el-table-column>
                      <el-table-column
                        prop="playerMark"
                        sortable
                        label="得分">
                      </el-table-column>
                    </el-table>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="决赛成绩总表" name="5">
              <el-table
                :data="finalList"
                style="width: 100%"
                :default-sort = "{prop: 'date', order: 'descending'}"
              >
                <el-table-column
                  type="index"
                >
                </el-table-column>
                <el-table-column
                  prop="gameInfo.gameName"
                  label="名称"
                >
                </el-table-column>
                <el-table-column
                  prop="gameInfo.gameMark"
                  label="前三名得分"
                >
                </el-table-column>
                <el-table-column
                  prop="gameInfo.gameField"
                  label="比赛场地"
                >
                </el-table-column>

                <el-table-column type="expand" label="分组成绩" width="150">
                  <template slot-scope="props">
                    <div class="innerTableWrap">
                      <div class="innerTableCard" v-for="(item, index) in props.row.arrangeGroup">
                        <h3>第{{index + 1}}组</h3>
                        <el-table
                          :data="item"
                          :default-sort = "{prop: 'score', order: 'descending'}"
                          style="width: 360px">
                          <el-table-column
                            type="index"
                            label="赛道/序号"
                            width="90px"
                            align="center">
                          </el-table-column>
                          <el-table-column
                            prop="playerName"
                            label="姓名"
                            width="80px">
                          </el-table-column>
                          <el-table-column
                            prop="playerId"
                            label="号码"
                            width="110px">
                          </el-table-column>
                          <el-table-column
                            prop="score"
                            sortable
                            label="成绩">
                          </el-table-column>
                        </el-table>
                      </div>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </el-main>
      </el-container>
    </el-container>
    <el-footer>田径运动会管理系统</el-footer>
  </el-container>
</div>

<script>
  new Vue({
    el: '#app',
    data () {
      return {
        searchData: [],
        search: '',
        searchType: 'playerName',


        tabActiveName: "1",
        collapseActiveName: null,


        arranges: [],
        arrangeList: [],
        players: [],
        playerList: [],
        scores: [],
        scoreList: [],
        eventList: [],
        finalList: [],

        classMarkList: []  // 保存班级得分
      }
    },
    methods: {
      toSearchData() {
        let _this = this;
        switch (_this.searchType) {
          case "playerId":
            _this.searchData = _this.scores.filter(data => {
              return !_this.search || data.playerId.toLowerCase().includes(_this.search.toLowerCase())
            })
            break;
          case "playerName":
            _this.searchData = _this.scores.filter(data => {
              return !_this.search || data.playerName.toLowerCase().includes(_this.search.toLowerCase())
            })
            break;
        }
      },
      handleClick(tab, event) {
        console.log(tab, event);
      },
      formatter(row, column) {
        return row.address;
      },
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      getArrangeList() {
        return axios.get('/list/arrange');
      },
      getEventList() {
        return axios.get('/list/event');
      },
      getScoreList() {
        return axios.get('/list/score');
      },
      getPlayerList() {
        return axios.get('/list/player');
      },
      toArrangeList(response) {
        if (response.data.status === 200) {
          this.arrangeList = response.data.data;
        } else {
          console.log(error)
          this.$alert('服务器错误，请稍后重试', {
            confirmButtonText: '确定',
            type: 'error'
          })
        }
      },
      toEventList(response) {
        if (response.data.status === 200) {
          this.eventList = response.data.data;
        } else {
          console.log(error)
          this.$alert('服务器错误，请稍后重试', {
            confirmButtonText: '确定',
            type: 'error'
          })
        }
      },
      toScoreList(response) {
        if (response.data.status === 200) {
          this.scoreList = response.data.data;
        } else {
          console.log(error)
          this.$alert('服务器错误，请稍后重试', {
            confirmButtonText: '确定',
            type: 'error'
          })
        }
      },
      toPlayerList(response) {
        if (response.data.status === 200) {
          this.playerList = response.data.data;
        } else {
          console.log(error)
          this.$alert('服务器错误，请稍后重试', {
            confirmButtonText: '确定',
            type: 'error'
          })
        }
      },
      id2name(id) {
        let name = "";
        this.eventList.forEach(e => {
          if (e.eventId === id) {
            name = e.eventName;
          }
        })
        return name;
      },
      id2score_fe(playerId, fieldEvent) {
        let score = "";
        this.scoreList.forEach(e => {
          if (e.fieldEvent === fieldEvent && e.playerId === playerId) {
            score = e.score;
          }
        })
        return score;
      },
      id2score_te(playerId, trackEvent) {
        let score = "";
        this.scoreList.forEach(e => {
          if (e.trackEvent === trackEvent && e.playerId === playerId) {
            score = e.score;
          }
        })
        return score;
      },
      getGameName(eventId, sex, status) {
        let sexName = sex === "1" ? "男子组" : "女子组";
        let statusName = status === "0" ? "初赛" : "决赛";
        let projectName = this.id2name(eventId);
        return sexName + "：" + projectName + " " + statusName;
      },
      toArranges() {
        let _this = this;
        // 匹配成绩
        this.arranges = this.arrangeList.map(e => {
          let gameInfo = e.gameInfo;
          e.arrangeGroup.map(e1 => {
            e1.map(e2 => {
              if (gameInfo.gameType === "te") {
                let score = _this.id2score_te(e2.playerId, e2.trackEvent);
                return Object.assign(e2, {
                  score
                })
              } else if (gameInfo.gameType === "fe") {
                let score = _this.id2score_fe(e2.playerId, e2.fieldEvent);
                return Object.assign(e2, {
                  score
                })
              }
            })
          })
          return e
        })

        // console.log(this.arranges)
      },
      toPlayers() {
        let _this = this;

        this.players = this.playerList.map(e => {
          return Object.assign(e, {
            playerSex: e.playerSex === "0" ? "女" : "男",
            trackEventName: _this.id2name(e.trackEvent),
            fieldEventName: _this.id2name(e.fieldEvent)
          })
        })
      },
      toScores() {
        let _this = this;

        this.scores = this.scoreList.map(e => {
          let trackEventName = _this.id2name(e.trackEvent);
          let fieldEventName = _this.id2name(e.fieldEvent);
          return Object.assign(e, {
            eventName: trackEventName ? trackEventName : fieldEventName
          })
        })
      },
      toFinalList() {
        let _this = this;
        this.arranges.forEach(e => {
          if (["1", "4"].includes(e.gameInfo.gameStatus)) {
            _this.finalList.push(e)
          }
        })
      },
      toClassMark() {
        let _this = this;
        let classMark = {};
        this.players.forEach(e => {
          let playerClass = e.playerClass;
          let playerMark = e.playerMark ? e.playerMark : 0;

          if (classMark[playerClass]) {
            classMark[playerClass].mark = classMark[playerClass].mark + playerMark
            if (e.playerMark) {
              classMark[playerClass].players.push(e)
            }
          } else {
            classMark[playerClass] = {
              mark: 0,
              players: []
            }
            classMark[playerClass].mark = playerMark
            if (e.playerMark) {
              classMark[playerClass].players.push(e)
            }
          }
        })

        for(let kv of Object.entries(classMark)){
          this.classMarkList.push({
            class: kv[0],
            mark: kv[1].mark,
            players: kv[1].players
          })
        }
        // console.log(classMark)
      }
    },
    created() {
      let _this = this;
      axios.all([_this.getArrangeList(), _this.getEventList(), _this.getScoreList(), _this.getPlayerList()])
        .then(axios.spread(function (arrangeList, eventList, scoreList, playerList) {
          _this.toArrangeList(arrangeList);
          _this.toEventList(eventList);
          _this.toScoreList(scoreList);
          _this.toPlayerList(playerList);
          _this.toArranges();
          _this.toFinalList();
          _this.toPlayers();
          _this.toScores();
          _this.toClassMark();
        }));
    }
  })
</script>
</body>
</html>
